<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03_元素属性操作</title>
		<!-- 元素属性操作：针对元素中属性
			  元素：固定属性  attr() removeAttr() 针对元素自带属性，捆绑型
				   附加属性  prop() removeProp()	 针对表单元素，附加刑
				   特点：固定属性和附加属性【两对函数使用方式一致】
			prop()			功能：表单元素：input元素，添加获取属性值的方式
							有参  传1个值 
							功能：表单元素中附加属性[checked、disabled]
								  input元素中属性checked添加bool值【是否选中状态】
								  获取input元素中属性checked布尔值
							语法:prop("属性值")
								  传2个值
							语法:prop("属性",bool类型)
							功能:设置input元素中属性状态【true设置选中，false未选中】
			removeProp()		
		-->
			<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>prop()函数与removeProp()函数使用</h1>
		<!-- 复选框  id="myCheckbox" checked选中 -->
		学生<input type="checkbox" id="myCheckbox" checked/>
		<button id="getPropBtn">prop()函数 获取</button>
		<button id="setPropBtn">prop()函数 设置</button>
		<button id="removePropBtn">removeProp()函数 移除</button>
		<div id="output"></div>
		<script>
			//1.获取属性值---点击getPropBtn---获取input元素中checked值【布尔型】
			//								output提示：你获取的checked值是+变量
			$("#getPropBtn").click(function(){
				var cbx=$('#myCheckbox').prop("checked");
				$("#output").text("你获取的checked值是"+cbx);
			});
			//2.设置属性值--实现多选勾掉
			$("#setPropBtn").click(function(){
				$('#myCheckbox').prop("checked",false);
				$("#output").text("你获取的checked值是:false");
			});
			//3.
			$("#removePropBtn").click(function(){
				$('#myCheckbox').removeProp("checked");
				$("#output").text("已经移除checked属性");
			});
		</script>
	</body>
</html>